<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>MINIO ADMIN</title>
    <!-- 引入 layui.css -->
    <link href="layui/css/layui2.8.13.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="layui/layui2.8.13.js"></script>

</head>
<body>

<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item layui-this"><a href="">Minio快速上手</a></li>
    <li class="layui-nav-item"><a href="https://min.io" target="_blank">官网</a></li>
    <li class="layui-nav-item"><a href="https://github.com/minio/minio-java" target="_blank">minio java</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">快速链接</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="#">链接01</a></dd>
            <dd><a href="#">链接02</a></dd>
            <dd><a href="#">链接03</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="https://note.youdao.com/s/cyX6PF8D" target="_blank">ESUN笔记</a></li>
</ul>
<form class="layui-form" action="" style="margin-top: 60px">

    <div class="layui-form-item">
        <label class="layui-form-label">Bucket</label>
        <div class="layui-input-block" style="width: 300px">
            <select name="bucketName" id="bucketName" lay-verify="required" lay-filter="bucket-select-filter">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文件路径</label>
        <div class="layui-input-block" style="width: 300px">
            <input type="text" name="dirPath" id="dirPath" required  lay-verify="required" placeholder="请输入文件存放路径" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文件(<=100MB)</label>
        <div class="layui-input-block" style="width: 300px">
            <input id="selectFile" type="button" value="选择文件" class="layui-btn" onclick="document.getElementById('filename').click()">
            <input type="file" name="filename" id="filename" style="display: none"  onchange="fileChange(this.files)"	>
            <div id="showFileName" class="layui-form-mid layui-word-aux"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <!--            <button type="button" onclick="test();" class="layui-btn layui-btn-primary">测试</button>-->
            <button type="button" onclick="getObjects();" class="layui-btn">获取bucket下的文件</button>
            <button type="button" onclick="saveAddControl();" class="layui-btn layui-btn-normal">上传文件</button></br></br></br>
        </div>
    </div>
</form>

<!--<label for="bucketName">bucketName</label>-->
<!--&lt;!&ndash;  <input type="text" name="bucketName" id="bucketName" required>&ndash;&gt;-->

<!--<select name= "bucketName" id="bucketName">-->
<!--    <option value =''>无</option>-->
<!--</select>-->
<!--</br>-->
<!--<label for="dirPath">dirPath</label>-->
<!--  <input type="text" name="dirPath" id="dirPath"></br>-->
<!--<label for="filename">file</label>-->
<!--  <input type="file" name="filename" id="filename" required	></br>-->
<!--<button type="button" onclick="test();" class="layui-btn layui-btn-primary">测试</button>-->
<!--<button type="button" onclick="getObjects();" class="layui-btn">获取bucket下的文件</button>-->
<!--  <button type="button" onclick="saveAddControl();" class="layui-btn layui-btn-normal">提交</button></br></br></br>-->

<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
        <!--        <button class="layui-btn layui-btn-sm" id="dropdownButton">-->
        <!--            下拉按钮-->
        <!--            <i class="layui-icon layui-icon-down layui-font-12"></i>-->
        <!--        </button>-->
        <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
            重载数据
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <!--        <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">-->
        <!--            <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>-->
        <!--            <i class="layui-icon layui-icon-down layui-font-12"></i>-->
        <!--        </button>-->
    </div>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="downloadFile">下载</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="deleteFile">删除</a>
        <!--        <a class="layui-btn layui-btn-xs" lay-event="more">-->
        <!--            更多-->
        <!--            <i class="layui-icon layui-icon-down"></i>-->
        <!--        </a>-->
    </div>
</script>

</body>
<script src="jquery-3.7.0.min.js"></script>
<script type="application/javascript">
    const serviceUrl = "http://localhost:8888/miniodemo";
    getBuckets();


    function fileChange(val){
        console.log("选择文件")
        console.log(val)
        console.log(val[0].name)
        $("#showFileName").html(val[0].name)
    }
    function test(){
        let sel = $("#bucketName").val();
        console.log(sel);
    }
    function getBuckets(){
        $.ajax({
            url : serviceUrl+'/index/listBuckets',
            type : 'get',
            contentType : false,
            processData : false,
            dataType : 'json',
            success : function(data) {
                // alert(res);
                let code = data.code;
                // alert(code);
                if (code === 200) {
                    console.log("listBuckets 获取成功");
                    let bucketNames = data.data;
                    // console.log(bucketNames)
                    // let selHtml = "<option value =''>--</option>";
                    for (let i = 0; i < bucketNames.length; i++) {
                        // selHtml += "<option value ='"+bucketNames[i]+"'>"+bucketNames[i]+"</option>";
                        $('#bucketName').append(new Option(bucketNames[i], bucketNames[i]));
                    }
                    // console.log(selHtml)
                    // $("#bucketName").html(selHtml);
                    layui.form.render("select");

                } else {
                    alert('上传失败，请重新上传！');
                }
            }
        })
    }

    layui.use(function(){
        let form = layui.form;
        // var layer = layui.layer;
        // select 事件
        form.on('select(bucket-select-filter)', function(data){
            // var elem = data.elem; // 获得 select 原始 DOM 对象
            let value = data.value; // 获得被选中的值
            // var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

            // layer.msg(this.innerHTML + ' 的 value: '+ value); // this 为当前选中 <option> 元素对象

            showTable(value);
        });
    });

    function showTable(bucketName){
        layui.use(['table', 'dropdown'], function(){
            let table = layui.table;
            let dropdown = layui.dropdown;

            // 创建渲染实例
            table.render({
                elem: '#test'
                ,url:serviceUrl+'/index/listObjectLayui?bucketName='+bucketName // 此处为静态模拟数据，实际使用时需换成真实接口
                ,toolbar: '#toolbarDemo'
                ,defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,height: 'full-35' // 最大高度减去其他容器已占有的高度差
                ,css: [ // 重设当前表格样式
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join('')
                ,cellMinWidth: 80
                ,totalRow: false // 开启合计行
                ,page: false  // 是否分页，会影响url参数
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'objectName', fixed: 'left', width:400, title: 'objectName', sort: true}
                    ,{field:'size', align: 'right', width:80, title: 'size', sort: true}
                    ,{field:'lastModified', title:'lastModified', width: 320, sort: true}
                    ,{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
                ]]
                ,done: function(){
                    var id = this.id;

                    // 重载测试
                    dropdown.render({
                        elem: '#reloadTest' // 可绑定在任意元素中，此处以上述按钮为例
                        ,data: [{
                            id: 'reload',
                            title: '重载'
                        }]
                        // 菜单被点击的事件
                        ,click: function(obj){
                            switch(obj.id){
                                case 'reload':
                                    // 重载 - 默认（参数重置）
                                    table.reload('test', {
                                        // where: {
                                        //     abc: '123456'
                                        //     //,test: '新的 test2'
                                        //     //,token: '新的 token2'
                                        // }
                                        /*
                                        ,cols: [[ // 重置表头
                                          {type: 'checkbox', fixed: 'left'}
                                          ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
                                          ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
                                          ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{= d.experience }} 分</div>'}
                                          ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
                                          ,{field:'joinTime', title:'加入时间', width:120}
                                        ]]
                                        */
                                    });
                                    break;
                                case 'reload-deep':
                                    // 重载 - 深度（参数叠加）
                                    table.reload('test', {
                                        where: {
                                            abc: 123
                                            ,test: '新的 test1'
                                        }
                                        //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
                                        //,cols: ins1.config.cols
                                    }, true);
                                    break;
                                case 'reloadData':
                                    // 数据重载 - 参数重置
                                    table.reloadData('test', {
                                        where: {
                                            abc: '123456'
                                            //,test: '新的 test2'
                                            //,token: '新的 token2'
                                        }
                                        ,scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                                        ,height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                        //,url: '404'
                                        //,page: {curr: 1, limit: 30} // 重新指向分页
                                    });
                                    break;
                                case 'reloadData-deep':
                                    // 数据重载 - 参数叠加
                                    table.reloadData('test', {
                                        where: {
                                            abc: 123
                                            ,test: '新的 test1'
                                        }
                                    }, true);
                                    break;
                            }
                            // layer.msg('可观察 Network 请求参数的变化');
                        }
                    });

                }
                ,error: function(res, msg){
                    console.log("发生错误")
                    console.log(res, msg)
                }
            });

            // 工具栏事件
            table.on('toolbar(test)', function(obj){
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        var getData = table.getData(id);
                        console.log(getData);
                        layer.alert(layui.util.escape(JSON.stringify(getData)));
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('说明xxxxxx');
                        break;
                };
            });

            // 触发单元格工具事件
            table.on('tool(test)', function(obj){ // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                // console.log(obj)
                if(obj.event === 'edit'){
                    console.log(data)
                    // layer.open({
                    //     title: '编辑 - id:'+ data.id,
                    //     type: 1,
                    //     area: ['80%','80%'],
                    //     content: '<div style="padding: 16px;">自定义表单元素</div>'
                    // });
                } if(obj.event === 'downloadFile'){
                    console.log("下载文件")
                    // console.log(data)
                    downloadFile(bucketName, data.objectName);

                    // layer.open({
                    //     title: '编辑 - id:'+ data.id,
                    //     type: 1,
                    //     area: ['80%','80%'],
                    //     content: '<div style="padding: 16px;">自定义表单元素</div>'
                    // });
                }if(obj.event === 'deleteFile'){
                    console.log("删除文件")
                    console.log(data)
                    layer.confirm('真的删除 ['+ data.objectName +'] 么', function(index){
                        layer.close(index);
                        deleteFile(bucketName, data.objectName, table);
                    });
                    // layer.open({
                    //     title: '编辑 - id:'+ data.id,
                    //     type: 1,
                    //     area: ['80%','80%'],
                    //     content: '<div style="padding: 16px;">自定义表单元素</div>'
                    // });
                }else if(obj.event === 'more'){
                    // 更多 - 下拉菜单
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: '查看',
                            id: 'detail'
                        },{
                            title: '删除',
                            id: 'del'
                        }],
                        click: function(menudata){
                            if(menudata.id === 'detail'){
                                layer.msg('查看操作，当前行 ID:'+ data.id);
                            } else if(menudata.id === 'del'){
                                layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
                                    obj.del(); // 删除对应行（tr）的DOM结构
                                    layer.close(index);
                                    // 向服务端发送删除指令
                                });
                            }
                        },
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                    })
                }
            });

        });
    }
    function getObjects(){
        let sel = $("#bucketName").val();
        console.log(sel);
        if(sel === "--"||sel === ""|| typeof sel == "undefined"){
            // alert("请选择bucketName")
            layer.alert('请选择Bucket');
        }else{
            showTable(sel);
            // $.ajax({
            //     url : serviceUrl+'/index/listObject?bucketName='+sel,
            //     type : 'get',
            //     contentType : false,
            //     processData : false,
            //     dataType : 'json',
            //     success : function(data) {
            //         // alert(res);
            //         let code = data.code;
            //         alert(code);
            //         if (code === 200) {
            //             console.log("listObject 获取成功");
            //             let objects = data.data;
            //             console.log(objects)
            //             // let tableHtml = "";
            //             for (let i = 0; i < objects.length; i++) {
            //                 // tableHtml += "<option value ='"+bucketNames[i]+"'>"+bucketNames[i]+"</option>";
            //                 console.log([objects[i].objectName, objects[i].lastModified,objects[i].size])
            //             }
            //             // console.log(tableHtml)
            //             // $("#objectTable").html(tableHtml);
            //
            //         } else {
            //             alert('上传失败，请重新上传！');
            //         }
            //     }
            // })
        }
    }

    function downloadFile(bucketName, filePath){
        $.ajax({
            url : serviceUrl + '/index/downloadFile?bucketName=' + bucketName + '&filePath='
                + filePath,
            type : 'get',
            // data : formData,
            contentType : false,
            processData : false,
            dataType : 'binary',
            xhrFields: { responseType: "blob" },
            success : function(result,status,xhr) {
                console.log("下载成功")
                console.log(result)
                console.log(status)
                // console.log(new Blob([result]))
                // console.log(xhr)
                var reader = new FileReader();
                reader.readAsDataURL(result);
                reader.onload = function (e) {
                    var a = document.createElement('a');
                    a.download = filePath;
                    a.href = e.target.result;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    layer.msg('文件下载完成:'+ filePath);
                }
            }
        })
    }

    function deleteFile(bucketName, filePath, table){
        $.ajax({
            url : serviceUrl + '/index/removeObject?bucketName=' + bucketName + '&filePath='
                + filePath,
            type : 'delete',
            // data : formData,
            contentType : false,
            processData : false,
            success : function(res) {
                console.log("删除完成")
                console.log(res)
                let code = res.code;
                console.log("code:"+code);
                if (code === 200) {
                    layer.msg('文件删除完成:'+ filePath);
                    table.reload('test',{});
                } else {
                    layer.msg('文件删除失败，参考错误:'+ res.message);
                }
            }
        })
    }
    function saveAddControl() {

        let bucketName = $("#bucketName").val();
        let dirPath = $("#dirPath").val();
        let formData = new FormData();
        formData.append("multipartFile", $("#filename")[0].files[0]);
        if(bucketName === "--"||bucketName === ""|| typeof bucketName == "undefined"){
            layer.alert('请选择Bucket');
        }else if($("#filename")[0].files[0] == null || typeof $("#filename")[0].files[0] == "undefined"){
            layer.alert('请选择文件');
        }else {
            $.ajax({
                url: serviceUrl + '/index/upload?bucketName=' + bucketName + '&dirPath='
                    + dirPath,
                type: 'post',
                data: formData,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function (data) {
                    // alert(res);
                    let code = data.code;
                    // alert(code);
                    if (code === 200) {
                        layer.msg('文件上传成功');
                        $("#filename").val('');//清空文件
                        $("#showFileName").html('');//清空文件名
                        showTable(bucketName);//刷新Object列表
                    } else {
                        layer.msg('文件上传失败');
                    }
                }
            })
        }
    }


</script>
</html>